<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

    <div class="user-information-container">
        <header>
            <div class="logo">山东旅游网</div>
            <nav>
                <ul>
                    <li><a href="customer.jsp">首页</a></li>
                    <li><a href="beautifulshandong.jsp">魅力山东</a></li>
                    <li><a href="infomation.jsp">资讯</a></li>
                    <li><a href="scenicspots.jsp">景点</a></li>
                    <li><a href="ticketpurchase.jsp">购票</a></li>
                </ul>
            </nav>
            <nav class="user-actions">
                <ul>
                    <li><a href="#">${userInfo.username}[${userInfo.memberLevel}]</a></li> 
                    <li><a href="userinfo.jsp">个人信息</a></li>
                    <li><a href="SalesRecordServlet?userID=${userInfo.userID}&usermemberLevel=${userInfo.memberLevel}">消费记录</a></li>
                    <li><a href="#">留言与回复</a></li>
                    <li><a href="index.jsp">退出</a></li>
                </ul>
            </nav>
        </header>
         <%
            if (request.getSession().getAttribute("userInfo") == null) {
                out.println("<p>用户信息获取失败，请检查网络或联系管理员。</p>");
            }
        %>
        <table class="recordsble">
            <thead>
                <tr>
                    <th>景点名称</th>
                    <th>购买票数</th>
                    <th>折后总价</th>
                    <th>消费时间</th>
                     <c:if test="${userInfo.memberLevel =='银卡会员' || userInfo.memberLevel=='金卡会员'}">
                        <th>操作</th>
                    </c:if>
                </tr>
            </thead>
            <tbody>
                <c:forEach var="record" items="${salesRecords}">
                    <tr>
                        <td>${record.spotName}</td>
                        <td>${record.ticketQuantity}</td>
                        <td>${record.consumptionAmount}</td>
                        <td>${record.saleTime}</td>
                        <c:if test="${userInfo.memberLevel == '银卡会员' || userInfo.memberLevel == '金卡会员'}">
                            <td>
                                <a href="deleteRecord?id=${record.spotID}" class="delete-btn">删除</a> <!-- 点击链接将请求deleteRecord这个Servlet，并传递当前记录的id -->
                            </td>
                        </c:if>
                    </tr>
                </c:forEach>
            </tbody>
        </table>    
    </div>
</body>

<style>

    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
    }

    header {
        background-color: white;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        padding: 10px 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

   .logo {
        color: orange;
        font-size: 24px;
        font-weight: bold;
    }

    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    nav ul li {
        margin-left: 20px;
    }

    nav ul li a {
        text-decoration: none;
        color: gray;
    }

    nav ul li a:hover {
        color: black;
    }

    .recordsble {
        margin:0 auto;
        width: 70%;
        border-collapse: collapse;
        margin-top: 20px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
    }

    .recordsble th,
    .recordsble td {
        border: 1px solid #ccc;
        padding: 12px 15px;
        text-align: center;
    }

   .recordsble th {
        background: linear-gradient(to bottom, #f4f4f4, #e0e0e0); /* 表头渐变背景 */
        color: #333;
    }

   .recordsble tr:nth-child(even) {
        background-color: #f9f9f9; /* 偶数行添加背景色，实现隔行变色效果 */
    }

   .recordsble tr:hover {
        background-color: #e9e9e9; /* 鼠标悬停行变色 */
        transform: scale(1.02); /* 鼠标悬停时添加放大动画效果 */
        transition: all 0.3s ease; /* 定义过渡动画效果 */
    }

   .recordsble {
        border-spacing: 0;
        border-top: none;
        border-left: none;
        border-right: none;
    }

   .recordsble th,
   .recordsble td {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
    }

   .recordsble tr:last-child td {
        border-bottom: none;
    }

   .recordsble th:last-child,
   .recordsble td:last-child {
        border-right: none;
    }
</style>
</html>
